<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id='aa'>
    <button id='send'> 发送</button>
    <div id='aaa'></div>
</body>
<script>
    /*
    *new WebSocket 后 key readyState
    *0示正在连接。
    *1表示连接成功，可以通信了。
    *2表示连接正在关闭。
    *3表示连接已经关闭，或者打开连接失败。
    */
    // var ws = new WebSocket("wss://echo.websocket.org");
    // var ws = new WebSocket("ws://localhost:3000/");// 设置服务器地址 //
    // console.log(ws)
    // //创建连接
    // ws.onopen = function () {
    //     console.log("Connection open ...");
    //     document.getElementById('aaa').innerHTML = 'acb'
    // }
    // //关闭
    // ws.onclose = function (
    // ) {
    //     console.log("Connection closed.");
    // }
    // //接收信息
    // ws.onmessage = function (e) {
    //     document.getElementById('aaa').innerHTML = e.data
    // }
    // document.getElementById('send').onclick = function () {
    //     let txt = document.getElementById('aa').value
    //     ws.send(txt);
    // }
    // //指定报错时的回调函数。
    // ws.onerror = function (event) {
    //     // handle error event
    // };

    // var ws = new WebSocket("ws://localhost:2000/");
    // ws.onopen = function (evt) {
    //     console.log("Connection open ...");
    //     ws.send("Hello WebSockets!");
    // };

    // ws.onmessage = function (evt) {
    //     console.log("Received Message: " + evt.data);
    //     ws.close();
    // };

    // ws.onclose = function (evt) {
    //     console.log("Connection closed.");
    // };


    function showmessage(str) {
        let div = document.createElement('div')
        div.innerHTML = str
        document.body.append(div)
    }
    var ws = new WebSocket("ws://localhost:3000/");// 设置服务器地址 //
    //创建连接
    ws.onopen = function () {
        console.log("Connection open ...");
        document.getElementById('send').onclick = function () {
            let txt = document.getElementById('aa').value
            ws.send(txt);
        }
    }
    //关闭
    ws.onclose = function (
    ) {
        console.log("Connection closed.");
    }
    //接收信息
    ws.onmessage = function (e) {
        showmessage(e.data)
    }
</script>

</html>